import React from 'react';
import Cubox from './Cubox';

const CuboxButton = ({
  children,
  variant = 'primary',
  className = '',
  cornerRadius = 12,
  strokeWidth = 1,
  isOutlined = false,
  width = 140,
  ...props
}) => {
  const variants = {
    primary: {
      backColor: '#3b82f6', // primary-600
      foreColor: '#ffffff',
      hoverBackColor: '#2563eb', // primary-700
      hoverForeColor: '#ffffff'
    },
    secondary: {
      backColor: '#374151', // gray-700
      foreColor: '#ffffff',
      hoverBackColor: '#f9fafb', // gray-50
      hoverForeColor: '#374151'
    },
    danger: {
      backColor: '#dc2626',
      foreColor: '#ffffff',
      hoverBackColor: '#f9fafb',
      hoverForeColor: '#dc2626' // red-600
    }
  };

  const currentVariant = variants[variant];

  return (
    <Cubox
      cornerRadius={cornerRadius}
      strokeWidth={strokeWidth}
      isOutlined={isOutlined}
      backColor={currentVariant.backColor}
      foreColor={currentVariant.foreColor}
      hoverBackColor={currentVariant.hoverBackColor}
      hoverForeColor={currentVariant.hoverForeColor}
      style={{
        width,
        ...props.style
      }}
      onClick={props.onClick}
    >
      <div 
        style={{ cursor: 'pointer' }}
      >
        {children}
      </div>
    </Cubox>
  );
};

export default CuboxButton; 